<template>
	<view>
		<view class="bg-gray">
			<view class="bg-green">
				<view class="width flex-row-start info">
					<image src="https://www.haopengsong.xyz/static/header.png" class="header" mode="aspectFit"></image>
					<view class="name font18">
						<view v-if='userInfo.id && userInfo.userName'>张三</view>
						<view v-else-if='userInfo.userType!==0 && userInfo.id' @click="jump('/pages/tabbar/user/apply')">去申请业主</view>
						<view v-else @click="getUserProfile">去登录</view>
					</view>
					<view v-if='userInfo.id'>
						<view  class="type font12" v-if='userInfo.userName'>{{userInfo.peopleUserTypeHan}}</view>
						<view class="type font12" v-else>未申请业主</view>
					</view>
				</view>
				<view class="width cucun flex-row-between">
					<view class="flex-row-start font15 cucunitem" v-for="(item,index) in cucun" :key='index' 
					    @click="jump(item.url)">
						<image :src="item.icon" class="icon"></image>
						{{item.name}}
					</view>
				</view>
			</view>
			<view class="width bg-white commonbg">
				<view class="font15 flex-row-between">
					<view class="color1 font15">我的订单</view>
					<view class="color9 font13" @click="jump('/pages/myorder/index')">
						查看全部
						<u-icon name='arrow-right' color='#666'></u-icon>
					</view>
				</view>
				<view class="flex-row-between" @click="jump('/pages/myorder/index')">
					<view class="navitem color1" v-for='(item,index) in navs'>
						<image :src="item.icon" class="iconnavs"></image>
						{{item.name}}
					</view>
				</view>
			</view>
			<view class="width bg-white commonbg">
				<view class="font15 flex-row-between">
					<view class="font15">客服电话</view>
					028-234567
				</view>
			</view>
			<view class="width">
				<view class="logout color3 font18">退出登录</view>
			</view>
		</view>        
	</view>
</template>

<script>
import storage from "@/utils/storage.js"; //缓存
import tar from "@/components/huashuiwan/tar.vue";
import { wx_login } from "@/api/login";
import { getInfo } from "@/api/common";
export default {
	components:{
		tar
	},
	data() {
		return {
			showBack:false,
			token:'',
			userInfo:{},
			cucun:[
				{ name:'储值中心', icon:'https://www.haopengsong.xyz/static/mine/icon5.png',url:'/pages/tabbar/user/cunzhicenter' },
				{ name:'我的房屋', icon:'https://www.haopengsong.xyz/static/mine/icon6.png',url:'/pages/home/index' },
				{ name:'家庭成员', icon:'https://www.haopengsong.xyz/static/mine/icon7.png',url:'/pages/member/index' },
			],
			navs:[
				{ name:'待支付', icon:'https://www.haopengsong.xyz/static/mine/icon1.png' },
				{ name:'待使用', icon:'https://www.haopengsong.xyz/static/mine/icon2.png' },
				{ name:'已完成', icon:'https://www.haopengsong.xyz/static/mine/icon3.png' },
				{ name:'取消/售后', icon:'https://www.haopengsong.xyz/static/mine/icon4.png' },
			]
		};
	},
	/**
	 * 页面加载
	 */
	onLoad(options) {
		
	},
	/**
	 * 触底事件
	 */
	onReachBottom() {
		
	},
	/**
	 * 下拉刷新
	 */
	onPullDownRefresh() {
		
	},
	/**
	 * 页面滚动
	 * @param {Object} e
	 */
	onPageScroll(e) {
		
	},
	computed: {
		peopleUserType: {
		  get() {
		    return this.$store.state.common.peopleUserType
		  },
		}
	},
	onShow() {
		wx_login({ wxCode:'admin_wx_code_1'}).then(res=>{
			storage.setAccessToken(res.token)
			this.getInfoFun()
		})
	},
	methods: {
		getUserProfile(e) {
			/* uni.login({
			      success: res => {
			        wx_login({ wxCode:res.code}).then(res=>{
						storage.setAccessToken(res.token)
						this.token = res.token
						this.getInfoFun()
					})
			      },
			      fail: err => {
			        console.log('登录失败：', err);
			      }
			});   */       
			wx_login({ wxCode:'admin_wx_code_1'}).then(res=>{
				storage.setAccessToken(res.token)
				this.token = res.token
				this.getInfoFun()
			})
		},
		getInfoFun(){
			getInfo().then(res=>{
				res.peopleUserTypeHan = this.peopleUserType.filter(i=>i.type == res.userType)[0].name
				this.userInfo = res
				storage.setUserInfo(res)
			}).catch(res=>{
				storage.setUserInfo({})
			})
		},
		leftClick(){},
		jump(res){
			uni.navigateTo({
				url: res
			});
		}
	}
};
</script>

<style scoped lang="scss">
	.iconchhli{
		margin-right: 8px; 
	}
	.bg-green{
		background: linear-gradient( 180deg, rgba(174,239,139,0.56) 0%, rgba(174,239,139,0) 100%);
		margin-bottom: 30px;
	}
	.info{
		padding: 50px 0 20px;
		.header{
			width: 68px;
			height: 68px;
			border-radius: 50%;
		}
		.name{
			padding: 0 10px;
		}
		.type{
			background-color: #FFF7E8;
			color: #FF9100;
			display: inline-block;
			padding: 3px 10px;
			border-radius: 4px;
		}
	}
	.cucun{
		background: linear-gradient( 286deg, #459539 0%, #71B36B 100%);
		border-radius: 24px 24px 24px 24px;
		padding:26px 12px;
		color: #fff;
		.icon{
			width: 20px;
			height: 20px;
			margin-right: 5px;
		}
		.cucunitem:nth-child(2){
			border-left: 1px solid #ffffff30;
			border-right: 1px solid #ffffff30;
			padding:0 20px;
		}
	}
	.navitem{
		flex: 0 25%;
		text-align: center;
		margin-top: 15px;
		.iconnavs{
			width: 40px;
			height: 40px;
			margin:0 auto ;
			display: block;
		}
	}
	.logout{
		height: 50px;
		border-radius: 12px;
		background-color: #fff;
		text-align: center;
		margin-top: 20px;
		line-height: 50px;
	}
</style>